<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box,
      .inner {
        max-width: 600px;
        margin: auto;
        padding: 30px;
        border: 1px solid #d00;
        border-radius: 10px;
        background-color: #fff;
      }
      .content,
      .user-cmm {
        width: 100%;
        min-height: 150px;
        padding: 10px;
        border: 1px solid d00;
        resize: none;
        box-sizing: border-box;
        border-radius: 10px;
        outline: none;
      }
      ul {
        list-style: none;
        line-height: 30px;
      }

      .list .c-user {
        border-bottom: 1px dashed skyblue;
      }
      .opt {
        text-align: right;
      }
      .contain {
        display: flex;
        justify-content: space-between;
      }
      .commont {
        /* padding-left: 20px; */
        margin-left: 20px;
        border-left: 1px dashed skyblue;
      }
      .mask {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        display: none;
      }
      .inner {
        display: none;
        position: relative;
        z-index: 9;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div>
        <textarea class="content"></textarea>
      </div>
      <div>
        <button id="send">发表</button>
      </div>
      <div>
        <ul class="list">
          <!-- <li>
            <div class="c-user">
              <div class="contain">这是内容</div>
              <div>2023-01-01 08:30:12</div>
              <div class="opt">
                <button>评论</button>
                <button>删除</button>
              </div>
            </div>
            <div class="commont"></div>
          </li> -->
        </ul>
      </div>
    </div>
    <div class="mask"></div>
    <div class="inner">
      <textarea class="user-cmm"></textarea>
      <div>
        <button id="send-cmm">发表评论</button>
        <button id="cancel">取消</button>
      </div>
    </div>
    <script src="./main.js"></script>
  </body>
</html>
